<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<style type="text/css">
<!--
.citySelector{  font:12px/1.5 tahoma,arial,\5b8b\4f53; background: #fff; text-align:left; }
.cityslide {width:250px; list-style:none; margin:0; padding:0; border: 1px solid #85BEE5; border-right-color: #3485C0; border-bottom-color: #3485C0;box-shadow: 2px 2px 3px rgba(0,0,0,0.3);  margin-top:-2px;}
.cityslide li { list-style:none; overflow:hidden;  height:16px; padding:4px 5px;}
.cityslide li.on{background:#9CD9FF; color:#fff;}
.cityslide li b { font-weight:normal;}
.cityslide li.empty{ background: #fff2e8; color: #666;}
.cityslide li.empty em{color: red; font-style:normal;}
.cityname {float:left;}
.cityspell {float:right;}
.cityBox{ width: 387px; border: 1px solid #85BEE5; overflow: hidden; box-shadow: 2px 2px 3px rgba(0,0,0,0.3);}
.cityBox ul{ margin: 0; padding: 0; overflow: hidden;}
.cityBox ul li{ float: left; list-style: none; padding: 2px 4px; border: 1px solid #85BEE5; cursor:pointer; margin-left: 4px; display: inline; background: #E1EFFE;}
.cityBox ul li.on{ background: #fff; border-bottom-color:#fff; position: relative;}
.hide{ display: none;}
p.tip{ color:#666; line-height: 20px; padding: 5px; margin: 0; text-indent: 3px;}
.hotCity{ border-top: 1px solid #85BEE5; margin-top: -1px; clear:left; overflow: hidden; padding-bottom: 5px; padding-top: 5px; _margin-bottom:8px;}
.cityTab{overflow: hidden;}
.cityTab dl{ margin:0; padding: 0; overflow: hidden; }
.cityTab dl dt{float: left; padding-left: 3px;color: #F30;text-indent: 5px; font-family: "Lucida console","consolas","courier new";line-height: 22px; font-size: 14px; width: 20px;}
.cityTab dl dd{ margin-left:2px; float:left; width: 360px;}
.cityTab dl dd a{ padding-left:5px; width:85px; line-height: 22px; display: inline-block; color: #000; text-decoration: none;}
.cityTab dl dd a:hover{text-decoration:underline; color: red}
.cityinput{border-width: 1px;border-style: solid;border-color: #45930b;height: 24px;line-height: 24px;width: 175px;font-size: 12px;padding-left: 2px;background: url(${aier_img_url}lib/citySelect-200-100.png) no-repeat 150px 5px;}
-->
</style>
<s:property value="vname"/><input type="text" class="cityinput" id="<s:property value="id"/>" value="城市名">
<script type="text/javascript">
/* *
 * 全局空间 Vcity
 * */
var Vcity = {};
/* *
 * 静态方法集
 * @name _m
 * */
Vcity._m = {
    /* 选择元素 */
    $:function (arg, context) {
        var tagAll, n, eles = [], i, sub = arg.substring(1);
        context = context || document;
        if (typeof arg == 'string') {
            switch (arg.charAt(0)) {
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = Vcity._m.$('*', context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },

    /* 绑定事件 */
    on:function (node, type, handler) {
        node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
    },

    /* 获取事件 */
    getEvent:function(event){
        return event || window.event;
    },

    /* 获取事件目标 */
    getTarget:function(event){
        return event.target || event.srcElement;
    },

    /* 获取元素位置 */
    getPos:function (node) {
        var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                scrollt = document.documentElement.scrollTop || document.body.scrollTop;
        var pos = node.getBoundingClientRect();
        return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
    },

    /* 添加样式名 */
    addClass:function (c, node) {
        if(!node)return;
        node.className = Vcity._m.hasClass(c,node) ? node.className : node.className + ' ' + c ;
    },

    /* 移除样式名 */
    removeClass:function (c, node) {
        var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
        if(!Vcity._m.hasClass(c,node))return;
        node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
    },

    /* 是否含有CLASS */
    hasClass:function (c, node) {
        if(!node || !node.className)return false;
        return node.className.indexOf(c)>-1;
    },

    /* 阻止冒泡 */
    stopPropagation:function (event) {
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    },
    /* 去除两端空格 */
    trim:function (str) {
        return str.replace(/^\s+|\s+$/g,'');
    }
};

/* 所有城市数据,可以按照格式自行添加（北京|beijing|bj），前16条为热门城市 */
<s:if test="loaddata">
Vcity.allCity = [<s:iterator value="cb">'<s:property value="name"/>|<s:property value="pinJ"/>|<s:property value="pinA"/>',</s:iterator>];
</s:if><s:else>
Vcity.allCity = ['北京市|bjs|beijingshi','兰州市|lzs|lanzhoushi','嘉峪关市|jygs|jiayuguanshi','金昌市|jcs|jinchangshi','白银市|bys|baiyinshi','天水市|tss|tianshuishi','武威市|wws|wuweishi','张掖市|zys|zhangyeshi','平凉市|pls|pingliangshi','酒泉市|jqs|jiuquanshi','庆阳市|qys|qingyangshi','定西市|dxs|dingxishi','陇南市|lns|longnanshi','临夏回族自治州|lxhzzzz|linxiahuizuzizhizhou','甘南藏族自治州|gnzzzzz|gannanzangzuzizhizhou','西安市|xas|xianshi','铜川市|tcs|tongchuanshi','宝鸡市|bjs|baojishi','咸阳市|xys|xianyangshi','渭南市|wns|weinanshi','延安市|yas|yananshi','汉中市|hzs|hanzhongshi','榆林市|yls|yulinshi','安康市|aks|ankangshi','商洛市|sls|shangluoshi','银川市|ycs|yinchuanshi','石嘴山市|szss|shizuishanshi','吴忠市|wzs|wuzhongshi','固原市|gys|guyuanshi','中卫市|zws|zhongweishi','西宁市|xns|xiningshi','海东地区|hddq|haidongdiqu','海北藏族自治州|hbzzzzz|haibeizangzuzizhizhou','黄南藏族自治州|hnzzzzz|huangnanzangzuzizhizhou','海南藏族自治州|hnzzzzz|hainanzangzuzizhizhou','果洛藏族自治州|glzzzzz|guoluozangzuzizhizhou','玉树藏族自治州|yszzzzz|yushuzangzuzizhizhou','海西蒙古族藏族自治州|hxmgzzzzzz|haiximengguzuzangzuzizhizhou','乌鲁木齐市|wlmqs|wulumuqishi','克拉玛依市|klmys|kelamayishi','吐鲁番地区|tlfdq|tulufandiqu','哈密地区|hmdq|hamidiqu','昌吉回族自治州|cjhzzzz|changjihuizuzizhizhou','博尔塔拉蒙古自治州|betlmgzzz|boertalamengguzizhizhou','巴音郭楞蒙古自治州|byglmgzzz|bayinguolengmengguzizhizhou','阿克苏地区|aksdq|akesudiqu','克孜勒苏柯尔克孜自治州|kzlskekzzzz|kezilesukeerkezizizhizhou','喀什地区|ksdq|kashendiqu','和田地区|htdq|hetiandiqu','伊犁哈萨克自治州|ylhskzzz|yilihasakezizhizhou','塔城地区|tcdq|tachengdiqu','阿勒泰地区|altdq|aletaidiqu','石河子市|shzs|shihezishi','阿拉尔布|aleb|alaerbu','图木舒克市|tmsks|tumushukeshi','五家渠市|wjqs|wujiaqushi','台北市|tbs|taibeishi','高雄市|gxs|gaoxiongshi','基隆市|jls|jilongshi','台中市|tzs|taizhongshi','台南市|tns|tainanshi','新竹市|xzs|xinzhushi','嘉义市|jys|jiayishi','长春市|zcs|zhangchunshi','吉林市|jls|jilinshi','四平市|sps|sipingshi','辽源市|lys|liaoyuanshi','通化市|ths|tonghuashi','白山市|bss|baishanshi','松原市|sys|songyuanshi','白城市|bcs|baichengshi','延边朝鲜族自治州|ybcxzzzz|yanbianchaoxianzuzizhizhou','哈尔滨市|hebs|haerbinshi','齐齐哈尔市|qqhes|qiqihaershi','鸡西市|jxs|jixishi','鹤岗市|hgs|hegangshi','双鸭山市|syss|shuangyashanshi','大庆市|dqs|daqingshi','伊春市|ycs|yichunshi','佳木斯市|jmss|jiamusishi','七台河市|qths|qitaiheshi','牡丹江市|mdjs|mudanjiangshi','黑河市|hhs|heiheshi','绥化市|shs|suihuashi','大兴安岭地区|dxaldq|daxinganlingdiqu','呼和浩特市|hhhts|huhehaoteshi','包头市|bts|baotoushi','乌海市|whs|wuhaishi','赤峰市|cfs|chifengshi','通辽市|tls|tongliaoshi','鄂尔多斯市|eedss|eerduosishi','呼伦贝尔市|hlbes|hulunbeiershi','巴彦淖尔市|bynes|bayannaoershi','乌兰察布市|wlcbs|wulanchabushi','兴安盟|xam|xinganmeng','锡林郭勒盟|xlglm|xilinguolemeng','阿拉善盟|alsm|alashanmeng','沈阳市|sys|shenyangshi','大连市|dls|dalianshi','鞍山市|ass|anshanshi','抚顺市|fss|fushunshi','本溪市|bxs|benxishi','丹东市|dds|dandongshi','锦州市|jzs|jinzhoushi','营口市|yks|yingkoushi','阜新市|fxs|fuxinshi','辽阳市|lys|liaoyangshi','盘锦市|pjs|panjinshi','铁岭市|tls|tielingshi','朝阳市|cys|chaoyangshi','葫芦岛市|hlds|huludaoshi','石家庄市|sjzs|shijiazhuangshi','唐山市|tss|tangshanshi','秦皇岛市|qhds|qinhuangdaoshi','邯郸市|hds|handanshi','邢台市|xts|xingtaishi','保定市|bds|baodingshi','张家口市|zjks|zhangjiakoushi','承德市|cds|chengdeshi','沧州市|czs|cangzhoushi','廊坊市|lfs|langfangshi','衡水市|hss|hengshuishi','西安市|xas|xianshi','铜川市|tcs|tongchuanshi','宝鸡市|bjs|baojishi','咸阳市|xys|xianyangshi','渭南市|wns|weinanshi','延安市|yas|yananshi','汉中市|hzs|hanzhongshi','榆林市|yls|yulinshi','安康市|aks|ankangshi','商洛市|sls|shangluoshi','武汉市|whs|wuhanshi','黄石市|hss|huangshishi','十堰市|sys|shiyanshi','宜昌市|ycs|yichangshi','襄樊市|xfs|xiangfanshi','鄂州市|ezs|ezhoushi','荆门市|jms|jingmenshi','孝感市|xgs|xiaoganshi','荆州市|jzs|jingzhoushi','黄冈市|hgs|huanggangshi','咸宁市|xns|xianningshi','随州市|szs|suizhoushi','恩施土家族苗族自治州|estjzmzzzz|enshitujiazumiaozuzizhizhou','仙桃市|xts|xiantaoshi','潜江市|qjs|qianjiangshi','天门市|tms|tianmenshi','神农架林区市|snjlqs|shennongjialinqushi','郑州市|zzs|zhengzhoushi','开封市|kfs|kaifengshi','洛阳市|lys|luoyangshi','平顶山市|pdss|pingdingshanshi','安阳市|ays|anyangshi','鹤壁市|hbs|hebishi','新乡市|xxs|xinxiangshi','焦作市|jzs|jiaozuoshi','济源市|jys|jiyuanshi','濮阳市|pys|puyangshi','许昌市|xcs|xuchangshi','漯河市|lhs|luoheshi','三门峡市|smxs|sanmenxiashi','南阳市|nys|nanyangshi','商丘市|sqs|shangqiushi','信阳市|xys|xinyangshi','周口市|zks|zhoukoushi','驻马店市|zmds|zhumadianshi','济南市|jns|jinanshi','青岛市|qds|qingdaoshi','淄博市|zbs|ziboshi','枣庄市|zzs|zaozhuangshi','东营市|dys|dongyingshi','烟台市|yts|yantaishi','潍坊市|wfs|weifangshi','济宁市|jns|jiningshi','泰安市|tas|taianshi','威海市|whs|weihaishi','日照市|rzs|rizhaoshi','莱芜市|lws|laiwushi','临沂市|lys|linyishi','德州市|dzs|dezhoushi','聊城市|lcs|liaochengshi','滨州市|bzs|binzhoushi','菏泽市|hzs|hezeshi','南昌市|ncs|nanchangshi','景德镇市|jdzs|jingdezhenshi','萍乡市|pxs|pingxiangshi','九江市|jjs|jiujiangshi','新余市|xys|xinyushi','鹰潭市|yts|yingtanshi','赣州市|gzs|ganzhoushi','吉安市|jas|jianshi','宜春市|ycs|yichunshi','抚州市|fzs|fuzhoushi','上饶市|srs|shangraoshi','福州市|fzs|fuzhoushi','厦门市|sms|shamenshi','莆田市|pts|putianshi','三明市|sms|sanmingshi','泉州市|qzs|quanzhoushi','漳州市|zzs|zhangzhoushi','南平市|nps|nanpingshi','龙岩市|lys|longyanshi','宁德市|nds|ningdeshi','合肥市|hfs|hefeishi','芜湖市|whs|wuhushi','蚌埠市|bbs|bangbushi','淮南市|hns|huainanshi','马鞍山市|mass|maanshanshi','淮北市|hbs|huaibeishi','铜陵市|tls|tonglingshi','安庆市|aqs|anqingshi','黄山市|hss|huangshanshi','滁州市|czs|chuzhoushi','阜阳市|fys|fuyangshi','宿州市|szs|suzhoushi','巢湖市|chs|chaohushi','六安市|las|liuanshi','毫州市|hzs|haozhoushi','池州市|czs|chizhoushi','宣城市|xcs|xuanchengshi','杭州市|hzs|hangzhoushi','宁波市|nbs|ningboshi','温州市|wzs|wenzhoushi','嘉兴市|jxs|jiaxingshi','湖州市|hzs|huzhoushi','绍兴市|sxs|shaoxingshi','金华市|jhs|jinhuashi','衢州市|qzs|quzhoushi','舟山市|zss|zhoushanshi','台州市|tzs|taizhoushi','丽水市|lss|lishuishi','南京市|njs|nanjingshi','无锡市|wxs|wuxishi','徐州市|xzs|xuzhoushi','常州市|czs|changzhoushi','苏州市|szs|suzhoushi','南通市|nts|nantongshi','连云港市|lygs|lianyungangshi','淮安市|has|huaianshi','盐城市|ycs|yanchengshi','扬州市|yzs|yangzhoushi','镇江市|zjs|zhenjiangshi','泰州市|tzs|taizhoushi','宿迁市|sqs|suqianshi','拉萨市|lss|lasashi','昌都地区|cddq|changdoudiqu','山南地区|sndq|shannandiqu','日喀则地区|rkzdq|rikazediqu','那曲地区|nqdq|neiqudiqu','那里地区|nldq|neilidiqu','林芝地区|lzdq|linzhidiqu','昆明市|kms|kunmingshi','曲靖市|qjs|qujingshi','玉溪市|yxs|yuxishi','保山市|bss|baoshanshi','昭通市|zts|zhaotongshi','丽江市|ljs|lijiangshi','思茅市|sms|simaoshi','临沧市|lcs|lincangshi','楚雄彝族自治州|cxyzzzz|chuxiongyizuzizhizhou','红河哈尼族彝族自治州|hhhnzyzzzz|honghehanizuyizuzizhizhou','文山壮族苗族自治州|wszzmzzzz|wenshanzhuangzumiaozuzizhizhou','西双版纳傣族自治州|xsbndzzzz|xishuangbannadaizuzizhizhou','大理白族自治州|dlbzzzz|dalibaizuzizhizhou','德宏傣族景颇族自治州|dhdzjpzzzz|dehongdaizujingpozuzizhizhou','怒江傈僳族自治州|njlszzzz|nujianglisuzuzizhizhou','迪庆藏族自治州|dqzzzzz|diqingzangzuzizhizhou','贵阳市|gys|guiyangshi','六盘水市|lpss|liupanshuishi','遵义市|zys|zunyishi','安顺市|ass|anshunshi','铜仁地区|trdq|tongrendiqu','黔西南布依族苗族自治州|qxnbyzmzzzz|qianxinanbuyizumiaozuzizhizhou','毕节地区|bjdq|bijiediqu','黔东南苗族侗族自治州|qdnmzdzzzz|qiandongnanmiaozudongzuzizhizhou','黔南布依族苗族自治州|qnbyzmzzzz|qiannanbuyizumiaozuzizhizhou','成都市|cds|chengdoushi','自贡市|zgs|zigongshi','攀枝花市|pzhs|panzhihuashi','泸州市|lzs|luzhoushi','德阳市|dys|deyangshi','绵阳市|mys|mianyangshi','广元市|gys|guangyuanshi','遂宁市|sns|suiningshi','内江市|njs|neijiangshi','乐山市|lss|leshanshi','南充市|ncs|nanchongshi','眉山市|mss|meishanshi','宜宾市|ybs|yibinshi','广安市|gas|guanganshi','达州市|dzs|dazhoushi','雅安市|yas|yaanshi','巴中市|bzs|bazhongshi','资阳市|zys|ziyangshi','阿坝藏族羌族自治州|abzzqzzzz|abazangzuqiangzuzizhizhou','甘孜藏族自治州|gzzzzzz|ganzizangzuzizhizhou','凉山彝族自治州|lsyzzzz|liangshanyizuzizhizhou','海口市|hks|haikoushi','三亚市|sys|sanyashi','五指山市|wzss|wuzhishanshi','琼海市|qhs|qionghaishi','儋州市|dzs|danzhoushi','文昌市|wcs|wenchangshi','万宁市|wns|wanningshi','东方市|dfs|dongfangshi','定安市|das|dinganshi','屯昌市|tcs|tunchangshi','澄迈市|cms|chengmaishi','临高市|lgs|lingaoshi','白沙黎族自治县|bslzzzx|baishalizuzizhixian','昌江黎族自治县|cjlzzzx|changjianglizuzizhixian','乐东黎族自治县|ldlzzzx|ledonglizuzizhixian','陵水黎族自治县|lslzzzx|lingshuilizuzizhixian','保亭黎族苗族自治县|btlzmzzzx|baotinglizumiaozuzizhixian','琼中黎族苗族自治县|qzlzmzzzx|qiongzhonglizumiaozuzizhixian','南宁市|nns|nanningshi','柳州市|lzs|liuzhoushi','桂林市|gls|guilinshi','梧林市|wls|wulinshi','北海市|bhs|beihaishi','防城港市|fcgs|fangchenggangshi','钦州市|qzs|qinzhoushi','贵港市|ggs|guigangshi','玉林市|yls|yulinshi','百色市|bss|baiseshi','贺州市|hzs|hezhoushi','河池市|hcs|hechishi','来宾市|lbs|laibinshi','崇左市|czs|chongzuoshi','广州市|gzs|guangzhoushi','韶关市|sgs|shaoguanshi','深圳市|szs|shenzhenshi','珠海市|zhs|zhuhaishi','汕头市|sts|shantoushi','佛山市|fss|foshanshi','江门市|jms|jiangmenshi','湛江市|zjs|zhanjiangshi','茂名市|mms|maomingshi','肇庆市|zqs|zhaoqingshi','惠州市|hzs|huizhoushi','梅州市|mzs|meizhoushi','汕尾市|sws|shanweishi','河源市|hys|heyuanshi','阳江市|yjs|yangjiangshi','清远市|qys|qingyuanshi','东莞市|dgs|dongguanshi','中山市|zss|zhongshanshi','潮州市|czs|chaozhoushi','揭阳市|jys|jieyangshi','云浮市|yfs|yunfushi','长沙市|zss|zhangshashi','株洲市|zzs|zhuzhoushi','湘潭市|xts|xiangtanshi','衡阳市|hys|hengyangshi','邵阳市|sys|shaoyangshi','岳阳市|yys|yueyangshi','常德市|cds|changdeshi','张家界市|zjjs|zhangjiajieshi','益阳市|yys|yiyangshi','郴州市|czs|chenzhoushi','永州市|yzs|yongzhoushi','怀化市|hhs|huaihuashi','娄底市|lds|loudishi','湘西土家族苗族自治州|xxtjzmzzzz|xiangxitujiazumiaozuzizhizhou'];
</s:else>
/* 正则表达式 筛选中文城市名、拼音、首字母 */

Vcity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i;
Vcity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;

/* *
 * 格式化城市数组为对象oCity，按照a-h,i-p,q-z,hot热门城市分组：
 * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
 * */

(function () {
    var citys = Vcity.allCity, match, letter,
            regEx = Vcity.regEx,
            reg2 = /^[abc]$/i, reg3 = /^[def]$/i, reg4 = /^[ghi]$/i, reg5 = /^[jkl]$/i, reg6 = /^[mno]$/i, 
            reg7 = /^[pqr]$/i, reg8 = /^[stu]$/i, reg9 = /^[vwx]$/i, reg10 = /^[yz]$/i;
    if (!Vcity.oCity) {
        Vcity.oCity = {hot:{},ABC:{},DEF:{},GHI:{},JKL:{},MNO:{},PQR:{},STU:{},VWX:{},YZ:{}};
        //console.log(citys.length);
        for (var i = 0, n = citys.length; i < n; i++) {
            match = regEx.exec(citys[i]);
            letter = match[3].toUpperCase();
            if (reg2.test(letter)) {
                if (!Vcity.oCity.ABC[letter]) Vcity.oCity.ABC[letter] = [];
                Vcity.oCity.ABC[letter].push(match[1]);
            } else if (reg3.test(letter)) {
                if (!Vcity.oCity.DEF[letter]) Vcity.oCity.DEF[letter] = [];
                Vcity.oCity.DEF[letter].push(match[1]);
            }else if (reg4.test(letter)) {
                if (!Vcity.oCity.GHI[letter]) Vcity.oCity.GHI[letter] = [];
                Vcity.oCity.GHI[letter].push(match[1]);
            }else if (reg5.test(letter)) {
                if (!Vcity.oCity.JKL[letter]) Vcity.oCity.JKL[letter] = [];
                Vcity.oCity.JKL[letter].push(match[1]);
            }else if (reg6.test(letter)) {
                if (!Vcity.oCity.MNO[letter]) Vcity.oCity.MNO[letter] = [];
                Vcity.oCity.MNO[letter].push(match[1]);
            }else if (reg7.test(letter)) {
                if (!Vcity.oCity.PQR[letter]) Vcity.oCity.PQR[letter] = [];
                Vcity.oCity.PQR[letter].push(match[1]);
            }else if (reg8.test(letter)) {
                if (!Vcity.oCity.STU[letter]) Vcity.oCity.STU[letter] = [];
                Vcity.oCity.STU[letter].push(match[1]);
            }else if (reg9.test(letter)) {
                if (!Vcity.oCity.VWX[letter]) Vcity.oCity.VWX[letter] = [];
                Vcity.oCity.VWX[letter].push(match[1]);
            }else if (reg10.test(letter)) {
                if (!Vcity.oCity.YZ[letter]) Vcity.oCity.YZ[letter] = [];
                Vcity.oCity.YZ[letter].push(match[1]);
            }
            /* 热门城市 前16条 */
            if(i<16){
                if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = [];
                Vcity.oCity.hot['hot'].push(match[1]);
            };};};})();
/* 城市HTML模板 */
Vcity._template = [
    '<p class="tip">热门城市(支持汉字/拼音)</p>',
    '<ul>',
    '<li class="on">热门城市</li>',
    '<li>ABC</li>','<li>DEF</li>',
    '<li>GHI</li>','<li>JKL</li>',
    '<li>MNO</li>','<li>PQR</li>',
    ,'<li>STU</li>','<li>VWX</li>',
    ,'<li>YZ</li>',
    '</ul>'
];

/* *
 * 城市控件构造函数
 * @CitySelector
 * */

Vcity.CitySelector = function () {
    this.initialize.apply(this, arguments);
};

Vcity.CitySelector.prototype = {

    constructor:Vcity.CitySelector,

    /* 初始化 */

    initialize :function (options) {
        var input = options.input;
        this.input = Vcity._m.$('#'+ input);
        this.inputEvent();
    },

    /* *
     * @createWarp
     * 创建城市BOX HTML 框架
     * */

    createWarp:function(){
        var inputPos = Vcity._m.getPos(this.input);
        var div = this.rootDiv = document.createElement('div');
        var that = this;

        // 设置DIV阻止冒泡
        Vcity._m.on(this.rootDiv,'click',function(event){
            Vcity._m.stopPropagation(event);
        });

        // 设置点击文档隐藏弹出的城市选择框
        Vcity._m.on(document, 'click', function (event) {
            event = Vcity._m.getEvent(event);
            var target = Vcity._m.getTarget(event);
            if(target == that.input) return false;
            //console.log(target.className);
            if (that.cityBox)Vcity._m.addClass('hide', that.cityBox);
            if (that.ul)Vcity._m.addClass('hide', that.ul);
            if(that.myIframe)Vcity._m.addClass('hide',that.myIframe);
        });
        div.className = 'citySelector';
        div.style.position = 'absolute';
        div.style.left = inputPos.left + 'px';
        div.style.top = inputPos.bottom + 'px';
        div.style.zIndex = 999999;

        // 判断是否IE6，如果是IE6需要添加iframe才能遮住SELECT框
        var isIe = (document.all) ? true : false;
        var isIE6 = this.isIE6 = isIe && !window.XMLHttpRequest;
        if(isIE6){
            var myIframe = this.myIframe =  document.createElement('iframe');
            myIframe.frameborder = '0';
            myIframe.src = 'about:blank';
            myIframe.style.position = 'absolute';
            myIframe.style.zIndex = '-1';
            this.rootDiv.appendChild(this.myIframe);
        }

        var childdiv = this.cityBox = document.createElement('div');
        childdiv.className = 'cityBox';
        childdiv.id = 'cityBox';
        childdiv.innerHTML = Vcity._template.join('');
        var hotCity = this.hotCity =  document.createElement('div');
        hotCity.className = 'hotCity';
        childdiv.appendChild(hotCity);
        div.appendChild(childdiv);
        this.createHotCity();
    },

    /* *
     * @createHotCity
     * TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
     * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
     **/

    createHotCity:function(){
        var odiv,odl,odt,odd,odda=[],str,key,ckey,sortKey,regEx = Vcity.regEx,
                oCity = Vcity.oCity;
        for(key in oCity){
            odiv = this[key] = document.createElement('div');
            // 先设置全部隐藏hide
            odiv.className = key + ' ' + 'cityTab hide';
            sortKey=[];
            for(ckey in oCity[key]){
                sortKey.push(ckey);
                // ckey按照ABCDEDG顺序排序
                sortKey.sort();
            }
            for(var j=0,k = sortKey.length;j<k;j++){
                odl = document.createElement('dl');
                odt = document.createElement('dt');
                odd = document.createElement('dd');
                odt.innerHTML = sortKey[j] == 'hot'?'&nbsp;':sortKey[j];
                odda = [];
                for(var i=0,n=oCity[key][sortKey[j]].length;i<n;i++){
                    str = '<a href="javascript:;" >' + oCity[key][sortKey[j]][i] + '</a>';
                    odda.push(str);
                }
                odd.innerHTML = odda.join('');
                odl.appendChild(odt);
                odl.appendChild(odd);
                odiv.appendChild(odl);
            }

            // 移除热门城市的隐藏CSS
            Vcity._m.removeClass('hide',this.hot);
            this.hotCity.appendChild(odiv);
        }
        document.body.appendChild(this.rootDiv);
        /* IE6 */
        this.changeIframe();

        this.tabChange();
        this.linkEvent();
    },

    /* *
     *  tab按字母顺序切换
     *  @ tabChange
     * */

    tabChange:function(){
        var lis = Vcity._m.$('li',this.cityBox);
        var divs = Vcity._m.$('div',this.hotCity);
        var that = this;
        for(var i=0,n=lis.length;i<n;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(var j=0;j<n;j++){
                    Vcity._m.removeClass('on',lis[j]);
                    Vcity._m.addClass('hide',divs[j]);
                }
                Vcity._m.addClass('on',this);
                Vcity._m.removeClass('hide',divs[this.index]);
                /* IE6 改变TAB的时候 改变Iframe 大小*/
                that.changeIframe();
            };};},

    /* *
     * 城市LINK事件
     *  @linkEvent
     * */

    linkEvent:function(){
        var links = Vcity._m.$('a',this.hotCity);
        var that = this;
        for(var i=0,n=links.length;i<n;i++){
            links[i].onclick = function(){
                that.input.value = this.innerHTML;
                Vcity._m.addClass('hide',that.cityBox);
                /* 点击城市名的时候隐藏myIframe */
                Vcity._m.addClass('hide',that.myIframe);
            };};},

    /* *
     * INPUT城市输入框事件
     * @inputEvent
     * */

    inputEvent:function(){
        var that = this;
        Vcity._m.on(this.input,'click',function(event){
            event = event || window.event;
            if(!that.cityBox){
                that.createWarp();
            }else if(!!that.cityBox && Vcity._m.hasClass('hide',that.cityBox)){
                // slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
                if(!that.ul || (that.ul && Vcity._m.hasClass('hide',that.ul))){
                    Vcity._m.removeClass('hide',that.cityBox);

                    /* IE6 移除iframe 的hide 样式 */
                    Vcity._m.removeClass('hide',that.myIframe);
                    that.changeIframe();
                }
            }
        });
        Vcity._m.on(this.input,'focus',function(){
            that.input.select();
            if(that.input.value == '城市名') that.input.value = '';
        });
        Vcity._m.on(this.input,'blur',function(){
            if(that.input.value == '') that.input.value = '城市名';
        });
        Vcity._m.on(this.input,'keyup',function(event){
            event = event || window.event;
            var keycode = event.keyCode;
            Vcity._m.addClass('hide',that.cityBox);
            that.createUl();

            /* 移除iframe 的hide 样式 */
            Vcity._m.removeClass('hide',that.myIframe);

            // 下拉菜单显示的时候捕捉按键事件
            if(that.ul && !Vcity._m.hasClass('hide',that.ul) && !that.isEmpty){
                that.KeyboardEvent(event,keycode);
            };});},

    /* *
     * 生成下拉选择列表
     * @ createUl
     * */

    createUl:function () {
        //console.log('createUL');
        var str;
        var value = Vcity._m.trim(this.input.value);
        // 当value不等于空的时候执行
        if (value !== '') {
            var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
            // 此处需设置中文输入法也可用onpropertychange
            var searchResult = [];
            for (var i = 0, n = Vcity.allCity.length; i < n; i++) {
                if (reg.test(Vcity.allCity[i])) {
                    var match = Vcity.regEx.exec(Vcity.allCity[i]);
                    if (searchResult.length !== 0) {
                        str = '<li><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                    } else {
                        str = '<li class="on"><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                    }
                    searchResult.push(str);
                }
            }
            this.isEmpty = false;
            // 如果搜索数据为空
            if (searchResult.length == 0) {
                this.isEmpty = true;
                str = '<li class="empty">对不起，没有找到数据 "<em>' + value + '</em>"</li>';
                searchResult.push(str);
            }
            // 如果slideul不存在则添加ul
            if (!this.ul) {
                var ul = this.ul = document.createElement('ul');
                ul.className = 'cityslide';
                this.rootDiv && this.rootDiv.appendChild(ul);
                // 记录按键次数，方向键
                this.count = 0;
            } else if (this.ul && Vcity._m.hasClass('hide', this.ul)) {
                this.count = 0;
                Vcity._m.removeClass('hide', this.ul);
            }
            this.ul.innerHTML = searchResult.join('');

            /* IE6 */
            this.changeIframe();

            // 绑定Li事件
            this.liEvent();
        }else{
            Vcity._m.addClass('hide',this.ul);
            Vcity._m.removeClass('hide',this.cityBox);

            Vcity._m.removeClass('hide',this.myIframe);

            this.changeIframe();
        }
    },

    /* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
    changeIframe:function(){
        if(!this.isIE6)return;
        this.myIframe.style.width = this.rootDiv.offsetWidth + 'px';
        this.myIframe.style.height = this.rootDiv.offsetHeight + 'px';
    },

    /* *
     * 特定键盘事件，上、下、Enter键
     * @ KeyboardEvent
     * */

    KeyboardEvent:function(event,keycode){
        var lis = Vcity._m.$('li',this.ul);
        var len = lis.length;
        switch(keycode){
            case 40: //向下箭头↓
                this.count++;
                if(this.count > len-1) this.count = 0;
                for(var i=0;i<len;i++){
                    Vcity._m.removeClass('on',lis[i]);
                }
                Vcity._m.addClass('on',lis[this.count]);
                break;
            case 38: //向上箭头↑
                this.count--;
                if(this.count<0) this.count = len-1;
                for(i=0;i<len;i++){
                    Vcity._m.removeClass('on',lis[i]);
                }
                Vcity._m.addClass('on',lis[this.count]);
                break;
            case 13: // enter键
                this.input.value = Vcity.regExChiese.exec(lis[this.count].innerHTML)[0];
                Vcity._m.addClass('hide',this.ul);
                Vcity._m.addClass('hide',this.ul);
                /* IE6 */
                Vcity._m.addClass('hide',this.myIframe);
                break;
            default:
                break;
        }
    },

    /* *
     * 下拉列表的li事件
     * @ liEvent
     * */

    liEvent:function(){
        var that = this;
        var lis = Vcity._m.$('li',this.ul);
        for(var i = 0,n = lis.length;i < n;i++){
            Vcity._m.on(lis[i],'click',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                that.input.value = Vcity.regExChiese.exec(target.innerHTML)[0];
                Vcity._m.addClass('hide',that.ul);
                /* IE6 下拉菜单点击事件 */
                Vcity._m.addClass('hide',that.myIframe);
            });
            Vcity._m.on(lis[i],'mouseover',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                Vcity._m.addClass('on',target);
            });
            Vcity._m.on(lis[i],'mouseout',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                Vcity._m.removeClass('on',target);
            });
        };}};
    var test=new Vcity.CitySelector({input:'<s:property value="id"/>'});
</script>
